<!DOCTYPE html>
<html lang="en">
{% load my_tag my_filter %}
<head>
    <meta charset="UTF-8">
    <title>星星不闪包退换</title>
    <!--重新加载页面  禁止缓存作用 -->
    <meta http-equiv=Cache-Control content=no-cache/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    {% block css %}
        <link rel="stylesheet" href="/static/my/css/index.css">
    {% endblock %}
    <link rel="stylesheet" href="/static/my/css/base.css">
    <link rel="stylesheet" href="/static/my/css/reset.css">
    <link rel="stylesheet" href="/static/fontawesome-free-5.15.4-web/css/all.min.css">
    <script src="/static/vue/vue.js"></script>
    <script src="/static/jquery/jquery.min.js"></script>
    <!-- 引入组件库 -->
    <script src="/static/elementui/index.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/static/elementui/theme-chalk/index.css">
    <link rel="stylesheet" href="/static/my/css/match/phone.css">
    <link rel="stylesheet" href="/static/viewer/css/viewer.css">

</head>
<body>
<div id="app">
    <link rel="stylesheet" :href="'/static/my/css/theme/' + theme + '.css'">
    <el-scrollbar ref="scrollbar" style="height: 100vh;">
                <el-drawer
            style ="display: none"
            custom-class="nav_drawer_class"
            :with-header="false"
            :modal="false"
            @open="nav_open"
            @close="nav_close"
            size="40%"
            :visible.sync="nav_drawer"
            direction="ltr"
            >
                <div class="nav_content">
                    <div class="title">
                        <img src="/static/my/img/me/solgan.jpg" alt="">
                        <h2>个人博客</h2>
                    </div>
                    <div class="content">
                        {% dynamic_nav request %}
                    </div>
                </div>
            </el-drawer>

        <nav class="nav_bg">

            <div class="left" id="dynamic_nav">
                {% dynamic_nav request %}
                    <a @click="nav_drawer=true" href="javascript:void(0);" class="a_menu"><i class="fa fa-align-justify"></i></a>
                {% block search %}
                    <div class="search">
                        <input type="text" @keydown.enter="search" v-model="search_key" class="search_box"
                               placeholder="搜索你想要的内容">
                        <button @click="search()"><i class="fa fa-search"></i></button>
                    </div>

                {% endblock %}

            </div>
            <div class="right">
                <img v-show="theme === 'light'" src="/static/my/img/nav/light.svg" @click="setTheme('dark')">
                <img v-show="theme === 'dark'" src="/static/my/img/nav/dark.svg" @click="setTheme('light')">


                {% if request.user.username %}

                    <el-dropdown>
                            <span class="el-dropdown-link">
                                {{ request.user.username }}<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                        <el-dropdown-menu slot="dropdown">
                            <a href="/backend/"><el-dropdown-item>个人中心</el-dropdown-item></a>
                            <a href="/backend/edit_avatar/"><el-dropdown-item>修改头像</el-dropdown-item></a>
                           {% if request.user.is_superuser %}
                            <a href="/backend/add_article/"><el-dropdown-item>发布文章</el-dropdown-item></a>
                            <a href="/admin/"><el-dropdown-item>后台管理</el-dropdown-item></a>
                           {% endif %}
                            <a href="/logout/"><el-dropdown-item>注销退出</el-dropdown-item></a>
                        </el-dropdown-menu>
                    </el-dropdown>

                {% else %}
                    <a href="/login">登陆</a>
                    <a href="/register">注册</a>
                {% endif %}


            </div>
        </nav>
        {% block banner %}
            {% banner 'index' %}
        {% endblock %}
        <main>
            {% csrf_token %}
            {% block main %}

                <div class="main">
                    <div class="left">
                        <div class="boutique_article card">
                            <div class="title">
                                <h2>精选文章</h2>
                                <div class="switch_article_category">
                                <span :active="this_category === 'qianduan' "
                                      @click="switch_article_category('qianduan')">前端</span>
                                    <span :active="this_category === 'houduan' "
                                          @click="switch_article_category('houduan')">后端</span>
                                </div>
                            </div>
                            <div class="body">
                                <ul v-show="this_category === 'qianduan'" class="qianduan">
                                    {% for first in category_list_first %}

                                        <li>
                                            <div class="left">
                                                <div>
                                                    <img src="{{ first.cover.url.url }}">
                                                </div>
                                            </div>
                                            <div class="right">
                                                <h2><a href="/article/{{ first.nid }}">{{ first.title }}</a></h2>
                                                <p>{{ first.abstract }}</p>
                                                <span>
                                        {{ first.create_date|date_humaniz }}
                                    </span>
                                            </div>
                                        </li>
                                    {% endfor %}

                                </ul>
                                <ul v-show="this_category === 'houduan'" class="houduan">
                                    {% for second in category_list_second %}
                                        <li>
                                            <div class="left">
                                                <div>
                                                    <img src="{{ second.cover.url.url }}">
                                                </div>
                                            </div>
                                            <div class="right">
                                                <h2><a href="/article/{{ second.nid }}">{{ second.title }}</a></h2>
                                                <p>{{ second.abstract }}</p>
                                                <span>
                                        {{ second.create_date|date_humaniz }}
                                    </span>
                                            </div>
                                        </li>
                                    {% endfor %}


                                </ul>
                            </div>
                        </div>
                        <div class="hot_list card">
                            <div class="title">
                                <h2 id="pos">今日热搜</h2>
                                <div>
                                    <a href="/news/">查看更多>>></a>
                                </div>
                            </div>
                            <div class="body">
                                <div v-for="item in news_list" :key="item.index">
                                    <span class="index">[[item.index]]</span>
                                    <a :href="item.link"
                                       target="_blank">[[item.title]]</a>
                                    <span class="num">[[item.hotValue]]</span>
                                </div>
                            </div>
                        </div>
                        <div class="all_article card">
                            <div class="title">
                                <h2>博客文章</h2>
                            </div>
                            <div class="body">
                                <ul class="article_content">
                                    {% for article in article_list %}
                                        <li>
                                            {% if article.category %}
                                                <div class="category_flag"
                                                     len="{{ article.get_category_display|length }}"
                                                     type="{{ article.get_category_display }}">{{ article.get_category_display }}</div>
                                            {% endif %}
                                            <div class="left">
                                                <div>
                                                    <el-image
                                                        scroll-container=".el-scrollbar__wrap"
                                                    lazy
                                                     src="{{ article.cover.url.url }}"
                                                         alt="">
                                                    <div slot="placeholder" class="image-slot">
                                                        loading <span class="dot">...</span>
                                                    </div>
                                                </el-image>

                                                </div>
                                            </div>
                                            <div class="right">
                                                <h2><a href="/article/{{ article.nid }}/">{{ article.title }}</a></h2>
                                                <p> {{ article.abstract }}</p>
                                                <div class="article_info">
                                                <span><i
                                                        class="far fa-clock"></i>{{ article.create_date | date:'Y-m-d' }}</span>
                                                    <span><i
                                                            class="fas fa-thumbs-up"></i>{{ article.digg_count }}</span>
                                                    <span><i class="far fa-eye"></i>{{ article.look_count }}</span>
                                                    <span><i
                                                            class="fas fa-comment"></i>{{ article.comment_count }}</span>
                                                    <span><i
                                                            class="fas fa-star-half-alt"></i>{{ article.collects_count }}</span>
                                                            {% if article.pwd %}
                                                                   <span><i class="fa fa-lock"></i></span>
                                                            {% endif %}
                                                </div>

                                                <a href="/article/{{ article.nid }}/" target="_blank">查看详情</a>

                                            </div>
                                        </li>
                                    {% endfor %}
                                </ul>
                                <ul class="pager">
                                    {{ pag.page_html | safe }}
                                </ul>
                            </div>


                        </div>

                    </div>
                    <div class="right">
                        <div class="advertisement card">
                            <div class="title">
                                <h2>待开发~~</h2>
                                <div>
                                    <a href="#">点击</a>
                                </div>
                            </div>
                            <div class="body">
                                主要内容
                            </div>
                        </div>
                        <div class="tags card">
                            <div class="title">
                                <h2>标签云</h2>
                            </div>
                            <div class="body">
                                <ul>
                                    <li>python</li>
                                    <li>java</li>
                                    <li>javascript</li>
                                    <li>python</li>
                                    <li>python</li>
                                    <li>python</li>
                                    <li>python</li>
                                    <li>python</li>
                                    <li>python</li>
                                    <li>python</li>
                                    <li>python</li>
                                    <li>python</li>
                                    <li>python</li>
                                    <li>python</li>
                                    <li>python</li>
                                </ul>
                            </div>
                        </div>
                        <div class="site_info card">
                            <div class="title">
                                <h2>站点信息</h2>
                            </div>
                            <div class="body">
                                <div class="item"><b>建站时间:</b> <span>20022年1月1日</span></div>
                                <div class="item"><b>网站程序:</b> <span>django</span></div>
                                <div class="item"><b>在线人数:</b> <span>{{ online_count }}</span></div>
                                <div class="item"><b>前端文章:</b> <span>{% calculation_category_count 1 %}</span></div>
                                <div class="item"><b>后端文章:</b> <span>{% calculation_category_count 2 %}</span></div>
                                <div class="item"><b>算法:</b> <span>{% calculation_category_count 3 %}</span></div>
                                <div class="item"><b>网站空间:</b> <span>腾讯云</span></div>
                                <div class="item"><b>订阅内容:</b></div>
                                <div class="images">
                                    <div class="qq"><img src="/static/my/img/footer/qq.png" alt="我的qq">我的qq</div>
                                    <div class="wechat"><img src="/static/my/img/footer/wechat.png" alt="我的微信">我的微信</div>
                                </div>

                            </div>
                        </div>
                        <div class="feedback card">
                            <div class="title">
                                <h2></h2>
                            </div>
                            <div class="body">
                                <el-input
                                        id="feedback__email"
                                        placeholder="请输入你的邮箱"
                                        v-model="feedback.email"
                                ></el-input>
                                <el-input
                                        id="feedback__content"
                                        placeholder="请输入你的想法"
                                        type="textarea"
                                        :rows="4"
                                        resize="none"
                                        v-model="feedback.content"
                                ></el-input>
                                <el-button type="primary" @click="feedback_add">确定发送</el-button>
                            </div>
                        </div>
                    </div>

                </div>

            {% endblock %}

        </main>
        <footer>
            <div class="left">
                <p class="thank">Thank For</p>
                <p class="sit_info">
                    <span> <img src="/static/my/img/footer/tencent.png" alt=""> 腾讯云服务器</span>
                    <span> <img src="/static/my/img/footer/tencent.png" alt=""> 腾讯云SSL证书</span>
                    <span> <img src="/static/my/img/footer/qiniu.png" alt=""> 七牛云存储</span>
                </p>
                <p class="version">
                    <span>version</span>
                    <span>1.0</span>
                </p>
                <p>最后更改时间: [[ getDateDiff('2022-5-30') ]]</p>
                <P class="beian">
                    <a href="javascript:void(0)"><img src="/static/my/img/footer/badges.png" alt="">备案号:暂无</a>
                </P>
            </div>
            <div class="right">
                <div class="contact">
                    <div>
                        <img class="svg" src="/static/my/img/footer/qq_icon.svg" alt="">
                        <img class="qq" src="/static/my/img/footer/qq.png" alt="">
                    </div>

                    <div>
                        <a href="https://gitee.com/milocarey" target="_blank"><img class="svg" src="/static/my/img/footer/gitee_icon.svg" alt=""></a>
                    </div>
                    <div>
                        <img class="svg" src="/static/my/img/footer/wexin_icon.svg" alt="">
                        <img class="qq" src="/static/my/img/footer/wechat.png" alt="">
                    </div>

                </div>
                <p>联系邮箱:xmk.hg28@gmail.com</p>

            </div>
        </footer>
    </el-scrollbar>
</div>

<script src="/static/axios/axios.min.js"></script>
<script>
    axios.interceptors.request.use(request => {
        if (request.method !== 'get') {
            let csrftoken = document.querySelector('input[name="csrfmiddlewaretoken"]').value

            request.headers['X-CSRFToken'] = csrftoken
        }
        return request
    })
    axios.interceptors.response.use(response => {
        return response.data
    })

    new Vue({
        el: '#app',
        // 配置vue的模板语法
        delimiters: ["[[", "]]"],
        data: {
            getDateDiff(date) {
                let dateTimeStamp = new Date(date).getTime()
                let result = ''
                let minute = 1000 * 60
                let hour = minute * 60
                let day = hour * 24
                let month = day * 30
                let now = new Date().getTime()
                let diffValue = now - dateTimeStamp
                if (diffValue < 0) return
                let monthC = diffValue / month
                let weekC = diffValue / (7 * day)
                let dayC = diffValue / day
                let hourC = diffValue / hour
                let minC = diffValue / minute
                if (monthC >= 1) {
                    result = "" + parseInt(monthC) + "个月前"
                } else if (weekC >= 1) {
                    result = "" + parseInt(weekC) + "周前"
                } else if (dayC >= 1) {
                    result = "" + parseInt(dayC) + "天前"
                } else if (hourC >= 1) {
                    result = "" + parseInt(hourC) + "小时前"
                } else if (minC >= 1) {
                    result = "" + parseInt(minC) + "分钟前"
                } else {
                    result = "刚刚"
                }
                return result
            },
            // 弹窗宽度
            max_dialog_width:'50%',
            min_dialog_width:'30%',
            nav_drawer:false,
            //默认主题
            theme: 'light',
            // 精选主题当前所在位置
            this_category: 'qianduan',
            // 评论内容
            comment_content: '',
            is_show: false,
            slide_list: [],
            slide_text: '显示悬浮目录',
            search_key: '',
            news_list: [],
            news_init: [
                {
                    name: '微博',
                    id: 'KqndgxeLl9',
                    url: 'https://file.ipadown.com/tophub/assets/images/media/s.weibo.com.png_50x50.png'
                },
                {
                    name: '知乎',
                    id: 'mproPpoq6O',
                    url: 'https://file.ipadown.com/tophub/assets/images/media/zhihu.com.png_50x50.png'
                }, {
                    name: '微信',
                    id: 'WnBe01o371',
                    url: 'https://file.ipadown.com/tophub/assets/images/media/mp.weixin.qq.com.png_50x50.png'
                }, {
                    name: '百度',
                    id: 'Jb0vmloB1G',
                    url: 'https://file.ipadown.com/tophub/assets/images/media/baidu.com.png_50x50.png'
                }, {
                    name: 'b站',
                    id: '74KvxwokxM',
                    url: 'https://file.ipadown.com/tophub/assets/images/media/bilibili.com.png_50x50.png'
                }, {
                    name: '抖音',
                    id: 'DpQvNABoNE',
                    url: 'https://file.ipadown.com/tophub/assets/images/media/iesdouyin.com.png_50x50.png'
                },


            ],
            news_active: '微博',
            news_active_url: 'https://file.ipadown.com/tophub/assets/images/media/s.weibo.com.png_50x50.png',
            mood_dialogVisible: false,
            mood_add: {
                name: '',
                avatar_id: null,
                content: '',
                drawing: '',

            },
            mood_show_drawing: [],
            mood_comment_dialogVisible: false,
            mood_add_comment: {
                name: '',
                content: '',
            },
            history_dialogVisible: false,
            history: {
                title: '',
                create_date: new Date(),
                content: '',
                drawing: '',
            },
            history_show_drawing: [],
            history_edit_add: false,
            history_picker_option: {
                disableDate(time) {
                    return time.getTime() > Date.now()
                }
            },
            feedback: {
                email: '',
                content: '',
            },
            article_pwd:'',


        },
        created() {
            let w = $(document).width()
            if (w>850){

            }else if(w>550){
                this.max_dialog_width = '70%'
                this.min_dialog_width = '50%'
            } else if (w >400 ) {
                this.max_dialog_width = '90%'
                this.min_dialog_width = '70%'
            }
            let path = window.location.pathname

            if (path.indexOf('article') !== -1) {
                this.init_slider()
            }
            if (path.indexOf('search') !== -1) {
                this.init_search_key()
            }
            if (path.indexOf('news') !== -1) {
                this.news_method_init(0)
            }
            if (path.indexOf('/') !== -1) {
                this.news_method_init(1)
            }
            // 读取存储在  localStorage 的信息
            this.init_theme()
            this.init_category()
            setTimeout(() => {
                this.get_siderbar()
                this.code_copy()
            }, 500)


        },
        mounted() {
            this.keydown()
            let path = window.location.pathname
            if (path.indexOf('search') === -1) {
                setTimeout(() => {
                    this.init_scroll()
                }, 100)
            }

        },
        methods: {
            nav_open(){
                $('nav,.my_header,main,footer').addClass('phone_show')
            },
            nav_close(){
                    $('nav,.my_header,main,footer').removeClass('phone_show')
             },
            //图片加载失败
            img_error(e) {
                e.target.style.display = 'none'
            },
            //设置主题
            setTheme(themeNmae) {
                this.theme = themeNmae;
                // 持久化存储,作为本地存储
                localStorage.setItem('theme', themeNmae)
            },
            //选择分类
            switch_article_category(categoryName) {
                this.this_category = categoryName;
                // 持久存储当前界面
                localStorage.setItem('category', categoryName)

            },
            // 初始化主题
            init_theme() {
                let theme = localStorage.getItem('theme')
                if (theme) {
                    this.theme = theme;
                }
            },
            //监听键盘
            keydown() {
                let el_bar = document.querySelector('.el-scrollbar__wrap')
                document.onkeydown = (e) => {
                    let e1 = e || event || window.event || arguments.callee.caller.arguments[0]
                    if (e1.target.classList.contains('viewer-open')){
                        return
                    }
                    let top = el_bar.scrollTop // 获取现在位置
                    if (e1.code === 'ArrowDown') {
                        $(el_bar).animate({scrollTop: top + 20}, 10)
                    } else if (e1.code === 'ArrowUp') {
                        $(el_bar).animate({scrollTop: top - 20}, 10)
                    }
                }
            },
            //滚动条初始化
            init_scroll() {
                let slider = document.querySelector('.slider_bar')
                let top1 = 0
                let nav = document.querySelector('.nav_bg')
                let path = window.location.pathname
                let bar = this.$refs.scrollbar.wrap
                let old_url = localStorage.getItem('current_url')
                let new_url = location.href
                if (path.indexOf('article') !== -1) {
                    top1 = $(slider).offset().top - 220
                }

                if (old_url === new_url) {
                    let top = localStorage.getItem('current_top')
                    localStorage.setItem('current_top', '0')
                    let el_bar = document.querySelector('.el-scrollbar__wrap')
                    $(el_bar).animate({scrollTop: top}, 0)
                }


                bar.onscroll = () => {
                    let top = bar.scrollTop
                    top >= 345 ? nav.classList.add('show') : nav.classList.remove('show')
                    // 动态悬浮目录
                    if (slider) {
                        top >= top1 ? slider.classList.add('fixed') : slider.classList.remove('fixed')
                    }
                }
            },

            // 初始化标签
            init_category() {
                let category = localStorage.getItem('category')
                if (category) {
                    this.this_category = category;
                }
            },
            // 发布评论
            add_comment(nid) {
                axios.post(`/api/article/comment/${nid}/`, {content: this.comment_content}).then(res => {
                    if (res.code) {
                        if (res.self) {
                            this.$refs[`comment_${res.self}`].focus();
                        }
                        this.$message.error(res.msg)
                        return
                    }
                    this.$message.success(res.msg)
                    setTimeout(() => {
                        location.reload()
                    }, 500)
                })
            },
            // 将被评论人的用户名展示到placeholder
            set_sub_placeholder(div, username, cid) {
                $(div).find('textarea').attr('placeholder', `@${username}`)
                $(div).find('textarea').attr('cid', cid)
            },
            //子评论回复显示
            sub_comment_set_placeholder(e, username, cid) {
                let div = $(e.target).parents('.sub_comment_list')
                this.set_sub_placeholder(div, username, cid)
            },
            // 展示子评论列表
            show_sub_comment_list(e, username, cid) {
                let div = $(e.target).parent().parent().next()
                $(div).slideToggle()
                this.set_sub_placeholder(div, username, cid)

            },
            // 发布子评论
            add_sub_comment(e, nid) {
                // nid 文章id
                // cid 评论id
                axios.post(`/api/article/comment/${nid}/`, {
                    content: $(e.target).prev().val(),
                    pid: $(e.target).prev().attr('cid')
                }).then(res => {
                    if (res.code) {
                        if (res.self) {
                            this.$refs[`sub_comment_${res.self}`].focus()
                        }
                        this.$message.error(res.msg)
                        return
                    }
                    this.$message.success(res.msg)
                    setTimeout(() => {
                        location.reload()
                    }, 500)
                })
            },
            // 删除子评论
            delete_sub_comment(nid, aid, root_comment_id) {
                this.$confirm('此操作将永久删除该评论, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete(`/api/article/comment/${nid}`, {data: {aid, pid: root_comment_id}}).then(res => {
                        if (res.code) {
                            this.$message.error(res.msg)
                            return
                        }
                        this.$message.success(res.msg)
                        setTimeout(() => {
                            location.reload()
                        }, 500)
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            // 评论点赞
            comment_digg(nid) {
                axios.post(`/api/comment/digg/${nid}/`).then(res => {
                    if (res.code) {
                        this.$message.error(res.msg)
                        return
                    }
                    e.target.innerHTML = `点赞(${res.data})`
                    this.$message.success(res.msg)
                })
            },
            // 文章点赞
            article_digg(e, nid) {
                let dom = e.target

                dom.classList.add('show')

                axios.post(`/api/article/digg/${nid}/`).then(res => {
                    if (res.code) {
                        this.$message.error(res.msg)
                        return
                    }
                    $(dom).next().text(res.data)
                    this.$message.success(res.msg)
                })

                let timer = null
                clearTimeout(timer)
                timer = setTimeout(() => {
                    dom.classList.remove('show')
                }, 1000)
            },
            // 文章收藏
            article_collect(e, nid) {
                let dom = e.target
                axios.post(`/api/article/collects/${nid}/`).then(res => {
                    if (res.code) {
                        this.$message.error(res.msg)
                        return
                    }
                    $(dom).next().text(res.data)

                    this.$message.success(res.msg)
                    if (res.is_collect) {
                        dom.classList.add('show')
                        return
                    }
                    dom.classList.remove('show')
                })
            },
            // 回到顶部
            go_to_top() {
                $('.el-scrollbar__wrap').animate({
                    scrollTop: 0
                }, 1000)
            },
            // 悬浮目录是否展示
            slider_change(val) {
                let dom = this.$refs.slider
                localStorage.setItem('is_show', val)
                val ? dom.classList.add('show') : dom.classList.remove('show')
                val ? this.slide_text = '关闭悬浮目录' : this.slide_text = '显示悬浮目录'
            },
            // 悬浮目录
            get_siderbar() {
                let content = $('#article_content')
                let h_list = content.children('h1,h2,h3,h4')
                let lis = []
                // 遍历h_list
                h_list.each((index, item) => {
                    let c = item.innerText
                    let tagName = item.tagName
                    let tagId = item.id
                    let ele = {
                        tagName,
                        c,
                        pos: '#' + tagId
                    }
                    lis.push(ele)
                })
                lis.push({
                    tagName: '#',
                    c: '去评论吧',
                    pos: '.comment_submit'
                })
                this.slide_list = lis
            },
            //
            go_side_bar(selector, e) {
                // 排他思想
                e.target.classList.add('active')
                $(e.target).siblings().removeClass('active')
                let pos = $(selector).offset().top

                $('.el-scrollbar__wrap').animate({
                    scrollTop: pos + $('.el-scrollbar__wrap').scrollTop() - 100
                }, 600)

            },
            // 初始化悬浮目录
            init_slider() {
                let flag = localStorage.getItem('is_show')
                // if (flag) {
                if (eval(flag)) {
                    this.is_show = true
                    this.$nextTick(() => {
                        this.slider_change(true)
                    })
                }
                //return
                //}
            },
            // 文章搜索
            search(path = '/search/', target = '_blank') {
                let box = document.querySelector('.search')

                if (!box.classList.contains('show_search')) {
                    box.classList.add('show_search')
                    return
                }
                if (!this.search_key) {
                    box.classList.remove('show_search')
                    return;
                }
                //打开标签页
                window.open(path + '?key=' + this.search_key, name = target)

            },
            // 初始化搜索池
            init_search_key() {
                let dom = document.querySelector('.search_key_input')
                let key = dom.getAttribute('data')
                this.search_key = key
            },
            // 代码一键复制
            code_copy() {
                $('pre').each(function () {
                    let copy = $('<i title="copy" class="el-icon-document-copy code-copy"></i>')
                    $(this).append(copy)
                    // 监听点击事件
                })
                $('pre i.code-copy').click(e => {
                    let text_list = $(e.target).prev().find('code')
                    let text = ''
                    text_list.each(function () {
                        text += $(this).text() + '\n'
                    })
                    // 向剪切板添加
                    let element = $('<textarea>' + text + '</textarea>')
                    $('body').append(element)
                    element[0].select()
                    document.execCommand('Copy')
                    element.remove()
                    this.$message.success('复制成功')
                })


            },
            // 获取热艘数据
            get_new_data(id, name, url, flag, size) {
                if (name === this.news_active && !flag) {
                    return
                }
                this.news_active = name
                this.news_active_url = url
                let data = {id}
                if (size) {
                    data.size = size
                }
                axios.post('https://api.codelife.cc/api/top/list', data,{
headers:{
    version:'1.2.32',
    signaturekey: 'U2FsdGVkX1/plHFl+6F5STMcK6SOa/42EX4Ca5p1JJk=',
    token:'token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI2MjU1MTg4MjJjZmM1YzZkYTliZDViYTgiLCJpYXQiOjE2NDk3NDQwNzMsImV4cCI6MTY4MDg0ODA3M30.wkPfs0jqfiUNTVKqT59mCxcjBaQU_J-dr-FrT7geeoY'

}
                }).then(res => {
                    this.news_list = res.data
                })
            },
            news_method_init(size) {
                this.get_new_data('KqndgxeLl9', '微博', 'https://file.ipadown.com/tophub/assets/images/media/s.weibo.com.png_50x50.png', true, size)
            },
            mood_show_comment_list(e) {
                let div = $(e.target).parent().parent().next()
                div.slideToggle()
            },
            // 发布心情
            mood_add_method() {
                axios.post('/api/moods/', this.mood_add).then(res => {
                    if (res.code) {
                        this.$message.error(res.msg)
                        this.$refs[`mood_add__${res.self}`].focus()
                        return
                    }
                    this.$message.success(res.msg)
                    setTimeout(() => {
                        location.reload()
                    }, 1000)
                })
            },
            // 删除心情
            mood_delete(e, nid) {
                this.$confirm('此操作将永久删除该心情, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete(`/api/moods/${nid}`).then(res => {
                        if (res.code) {
                            this.$message.error(res.msg)
                        } else {
                            this.$message.success(res.msg)
                            setTimeout(() => {
                                $(e.target).parents('.mood').remove()
                            }, 1000)
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // 打开回复心情的对话kuang
            mood_comment_dialogVisible_show(nid) {
                this.mood_comment_dialogVisible = true
                this.mood_comment_add_method.nid = nid
            },
            // 心情评论
            mood_comment_add_method() {
                let nid = this.mood_comment_add_method.nid

                axios.post(`/api/mood_comments/${nid}/`, this.mood_add_comment).then(res => {
                    if (res.code) {
                        this.$message.error(res.msg)
                        this.$refs[`mood_comment_add__${res.self}`].focus()
                        return
                    }
                    this.$message.success(res.msg)
                    setTimeout(() => {
                        location.reload()
                    }, 1000)
                })

            },
            // 心情删除
            mood_sub_comment_delete(nid, mood_id, e) {
                this.$confirm('此操作将永久删除该评论, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // nid 评论id  mood_id 心情id
                    axios.delete(`/api/mood_comments/${nid}`, {
                        data: {
                            mood_id,
                        }
                    }).then(res => {
                        if (res.code) {
                            this.$message.error(res.msg)
                        }
                        this.$message.success(res.msg)
                        setTimeout(() => {

                            $(e.target).parents('.mood').find('.mood_comment_num').text(`评论(${res.data})`)
                            $(e.target).parents('li').remove()
                        }, 1000)
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            // 心情点赞和心情评论点赞
            mood_digg(path, nid, e) {
                axios.put(`/api/${path}/${nid}/`).then(res => {
                    if (res.code) {
                        this.$message.error(res.msg)
                    }
                    this.$message.success(res.msg)
                    $(e.target).text(`点赞(${res.data})`)
                })
            },

            // 回忆录添加和编辑
            history_add_edit_method(nid) {
                axios.post('/api/history' + nid, this.history).then(res => {
                    if (res.code) {
                        this.$message.error(res.msg)
                        return
                    }
                    this.$message(res.msg)
                    this.history_dialogVisible = false
                    location.reload()
                })
            },
            // 删除回忆录
            history_remove(nid, e) {
                this.$confirm('此操作将永久删除该条回忆录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete(`/api/history/${nid}`).then(res => {
                        if (res.code) {
                            this.$message.error(res.msg)
                            return
                        }
                        $(e.target).parents('.timeline-item').remove()

                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            history_add_method(nid) {
                if (!nid) {
                    // 添加事件
                    this.history_add_edit_method('/')
                    return
                }
                // 编辑事件
                this.history_add_edit_method(nid + '/')


            },
            uploadImgFromPaster(file) {
                axios.post('/api/paste_upload/', {image: file}).then(res => {
                    this.history.drawing = res.url + '\n'
                    console.log(this.history.drawing)
                })
            },
            // 上传图片
            paste_upload(e) {
                let clipboardData = (e.clipboardData || e.originalEvent.clipboardData)
                let items = clipboardData.items, len = items.length, blob = null;
                // 在items里找粘贴的image，需要循环
                for (let i = 0; i < len; i++) {
                    if (items[i].type.indexOf('image') !== -1) {
                        // getAsFile() 此方法只是living standar firefox ie11 并不支持
                        blob = items[i].getAsFile()
                    }
                }
                if (blob !== null) {

                    // 读取图片文件
                    let reader = new FileReader()
                    reader.onload = (event) => {
                        // event.target.result 即为图片的Base64编码字符串
                        let base64_str = event.target.result
                        this.uploadImgFromPaster(base64_str)
                    }

                    reader.readAsDataURL(blob)
                    // 阻止默认行为即不让剪贴板内容在div中显示出来
                    {#e.preventDefault()#}
                }


            },

            history_show(e, nid, title, create_date) {
                let div = e.target
                this.history_edit_add = nid
                this.history.title = title
                this.history.create_date = create_date
                this.history.content = div.getAttribute('content')
                this.history.drawing = div.getAttribute('drawing')
                this.history_dialogVisible = true
            },
            history_handleClose(done) {
                this.$confirm('确认关闭,关闭之后数据失效').then(() => {
                    done();
                    this.history_edit_add = false
                    this.history.title = ''
                    this.history.create_date = new Date()
                    this.history.content = ''
                    this.history.drawing = ''

                }).catch(() => {

                })
            },
            feedback_add(){
                axios.post('/api/feedback/',this.feedback).then(res=>{
                if (res.code){
                this.$message.error(res.msg)
                $(`#feedback__${res.self}`)[0].focus()
                return
                }
            this.$message.success(res.msg)
            this.feedback.content=''
})
            },
            article_pwd_show(nid){
                console.log(111)
            axios.post(`/api/article_pwd/${nid}/`,{pwd:this.article_pwd}).then(res=>{
                if(res.code){
                    this.$message.error(res.msg)
                    document.getElementById('article_pwd').focus()
                    return
                }
                this.$message.success(res.msg)
                location.reload()
            })
            },

            // method的括号
        },
        watch: {
            'mood_add.drawing'(n, o) {
                this.mood_show_drawing = n.split('\n');
            },
            'history_add.drawing'(n, o) {
                this.history_show_drawing = n.split('\n');
            }


            // watch的括号
        },
        // vue的括号
    })

    let w = true
    $('a').click(e => {
        w = false
    })
    window.onbeforeunload = e => {
        if (w) {
            let el_bar = document.querySelector('.el-scrollbar__wrap')
            let url = location.href
            localStorage.setItem('current_top', el_bar.scrollTop) // 离开前 距离页面顶部的高度
            localStorage.setItem('current_url', url) // 离开前的网站路径
        }
    }

</script>


{% block js %}
    <script>
        // 图片轮播图
        let menu_img = document.querySelectorAll(".dynamic_shutffl")
        let banner = document.querySelector('#banner_box')
        let banner_time = Number(banner.getAttribute('banner_time'))

        let menu_length = menu_img.length
        let index = 0;
        // 清除定时器
        let timer = null;
        clearInterval(timer)
        timer = setInterval(() => {
            if (index === menu_length) {
                index = 0
            }
            // 复原样式
            for (let i of menu_img) {
                i.style.opacity = 0
            }
            menu_img[index].style.opacity = 1
            index++

            if (!banner_time) {
                clearInterval(timer)
            }
        }, banner_time * 1000)

        let banner_slogan = document.querySelector('#banner_slogan')
        let slogan_list = eval(banner_slogan.getAttribute('lis'))
        let slogan_time = Number(banner_slogan.getAttribute('slogan_time'))
        let slogan_timer = null;
        let slogan_index = 0;
        slogan_timer = setInterval(() => {
            slogan_index++
            if (slogan_index === slogan_list.length) {
                slogan_index = 0;
            }
            if (!slogan_time) {
                clearInterval(slogan_timer)
            } else {
                banner_slogan.innerText = slogan_list[slogan_index]
            }
        }, slogan_time * 1000)


    </script>
{% endblock %}
    <script src="/static/viewer/js/viewer.js"></script>
    <script>
        $('.site_info >.body >.images >div ').viewer();
    </script>


{% block article_js %}

{% endblock %}

</body>
</html>